<template>
  <div>
    <div>
      <el-form :inline="true" :model="param">
        <el-col :span="6">
          <el-form-item label="茶室名">
            <el-input @clear="findHouse" v-model="param.name" placeholder="筛选名称" clearable prefix-icon="el-icon-search"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="findHouse">查询</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div style="margin-bottom: 10px ;">

      <el-table ref="userTable" :data="tableData" :stripe="true" :border="true"
                style="width: 100%">
        <el-table-column prop="name" label="茶室名" width="100"></el-table-column>
        <el-table-column prop="img" label="图片">
          <template v-slot="{row}">
            <el-image :src='"/api/fileserver/" +row.img' style=" height: 50px;"
                      :preview-src-list="['/api/fileserver/' +row.img]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="茶室规格" width="100" align="center">
          <template v-slot="{row}">
            <el-tag effect="plain" v-if="row.type === '小'" size="small">小</el-tag>
            <el-tag effect="plain" type="warning" v-if="row.type === '中'" size="medium">中</el-tag>
            <el-tag effect="plain" type="success" v-if="row.type === '大'">大</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="90" align="center">
          <template v-slot="{row}">
            <h4  >{{ row.price }} 元</h4>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="seat" label="位置"></el-table-column>
        <el-table-column prop="isUse" label="茶室状态" width="100" align="center">
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.isUse === 1" size="small">空房</el-tag>
            <el-tag effect="dark" type="danger" v-if="row.isUse === 2" size="small">预定</el-tag>
            <el-tag v-if="row.isUse === 3" type="danger" size="small">报修</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="useTime" label="预定时间" width="160" align="center"></el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="{row}">
            <el-button @click="wuHouse(row)" :disabled="row.isUse === 1 || row.isUse === 3" type="text" size="small">退茶室</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :page-sizes="[8, 16, 30]" @current-change="pageChange($event)"
                     :page-size=this.param.size @size-change="sizeChange($event)"
                     layout="total,prev,pager,next,sizes" :total="total" small>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "unOrder",
  data() {
    return {
      userInfo: [],
      tableData: [],
      total: 0,
      param:{
        branchId:'',
        name: '',
        page: 1,
        size: 8,
      },
      house:{}
    }
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    this.findHouse();
  },
  methods:{
    findHouse() {
      this.param.isUse = 2
      this.param.branchId = this.userInfo.branchId
      console.log(this.param)
      this.$axios.get('/api/house/findHouse', {params: this.param}).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      }).catch(e => console.log(e));
    },
    wuHouse(row) {
      this.house.id = row.id
      this.house.isUse = 1  //空茶室
      this.house.useTime = null
      this.upApi()
    },
    upApi(){
      this.$axios.post('/api/house/upHouse', this.house).then(res => {
        if (res.data.status === 1) {
          this.$notify({
            title: '提示',
            message: '操作成功',
            type: 'success'
          });
          this.findHouse()
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    pageChange(page) {
      this.param.page = page;
      this.findHouse()
    },
    sizeChange(size) {
      this.param.size = size;
      this.findHouse()
    },
  }

}
</script>

<style scoped>

</style>
